<template>
    <div class="scheme-price">
        <div class="left">
            <TitleTips title="养护方案">
                <BaseButton slot="button" v-permission="{ btnCode: 'dlyh_c52_d234_2' }" style="position: absolute; right: 0;" @click="handleAddScheme">添加</BaseButton>
            </TitleTips>
            <div class="search">
                <span class="label">方案名称</span>
                <el-input v-model.trim="schemeName" clearable placeholder="请输入方案名称，支持模糊搜索" @change="getSchemeList"></el-input>
            </div>
            <div v-if="schemeList.length > 0" v-loading="schemeLoading" class="list">
                <div v-for="item in schemeList" :key="item.id" class="item" :class="{ active: schemeId === item.id}" @click="handleChangeScheme(item)">
                    <span class="name g-line-1">{{ item.schemeName }}</span>
                    <div class="btn">
                        <BaseButton v-permission="{ btnCode: 'dlyh_c52_d236_2' }" type="text" @click.stop="handleEditScheme(item)">编辑</BaseButton>
                        <BaseButton v-permission="{ btnCode: 'dlyh_c52_d237_2' }" type="text" color="danger" @click.stop="handleDeleteScheme(item.id)">删除</BaseButton>
                    </div>
                </div>
            </div>
            <div v-else class="no-data">暂无数据</div>
        </div>
        <BasePage v-if="schemeList.length > 0" style="flex: 1;">
            <TitleTips slot="title" :title="(titleInfo.highwayName || '') + '养护方案措施及单价'">
                <div slot="button">
                    <span class="title-item">路面类型：{{ titleInfo.pavementType }}</span>
                    <span class="title-item">技术等级：{{ titleInfo.roadType }}</span>
                    <span class="title-item">AADT：{{ computedAadt }}</span>
                    <span class="title-item">管养单位：{{ titleInfo.orgName }}</span>
                </div>
            </TitleTips>
            <el-form slot="form" :inline="true" size="medium" label-width="78px" @submit.native.prevent>
                <el-form-item label="养护类型">
                    <el-select v-model="maintType" placeholder="请选择" clearable style="width: 100%">
                        <el-option v-for="d in MaintenanceType2Options" :key="d.value" :label="d.label" :value="d.label" />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <BaseButton v-permission="{ btnCode: 'dlyh_c52_d239_2' }" @click="handleFilter">查询</BaseButton>
                </el-form-item>
            </el-form>

            <div slot="button">
                <BaseButton v-permission="{ btnCode: 'dlyh_c52_d235_2' }" @click="handleAdd">新增</BaseButton>
            </div>

            <!--数据列表区-->
            <BaseTable
                slot="table"
                v-loading="listLoading"
                :columns="columns"
                :data="list"
                row-key="id"
                height="calc(100% - 73px)"
                highlight-current-row
                @selection-change="handleSelectionChange"
            >
                <template #index="{ scope: { $index } }">
                    <span>{{ ($index + 1) + (page.pageNo - 1) * page.pageSize }}</span>
                </template>
                <template #handle="{ scope: { row } }">
                    <BaseButton v-permission="{ btnCode: 'dlyh_c52_d238_2' }" type="text" @click="handleEdit(row)">修改</BaseButton>
                    <BaseButton v-permission="{ btnCode: 'dlyh_c52_d237_2' }" type="text" color="danger" @click="handleDelete(row.id)">删除</BaseButton>
                </template>
            </BaseTable>
            <!--分页组件-->
            <Pagination
                slot="pagination"
                :current-page.sync="page.pageNo"
                :page-size.sync="page.pageSize"
                :total="page.total"
                @current-change="getList"
                @size-change="getList"
            />
        </BasePage>
        <div v-else style="flex: 1;">
            <div slot="table" class="no-data">暂无数据</div>
        </div>
        <SchemeSaveOrUpdate ref="schemeDialog" @success="schemeUpdateSuccess"></SchemeSaveOrUpdate>
        <PriceSaveOrUpdate ref="priceDialog" @success="handleFilter"></PriceSaveOrUpdate>
    </div>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import { MaintSchemeModel, MeasurePriceModel } from '@/models'
import { MaintenanceType2Options } from '@/views/auxiliary-decision/constants'
import reconfirm from '@/utils/reconfirm'
import SchemeSaveOrUpdate from './SchemeSaveOrUpdate.vue'
import PriceSaveOrUpdate from './PriceSaveOrUpdate.vue'
import { AADTOptions } from '@/views/auxiliary-decision/constants'

export default {
    name: 'BillOfQuantities',
    components: {
        BasePage,
        SchemeSaveOrUpdate,
        PriceSaveOrUpdate
    },
    data() {
        return {
            MaintenanceType2Options,
            schemeId: '',
            schemeName: '',
            maintType: '',
            schemeModel: new MaintSchemeModel(),
            priceModel: new MeasurePriceModel(),
            schemeList: [],
            listLoading: true,
            schemeLoading: true,
            titleInfo: {},
            list: [],
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            columns: Object.freeze([
                // {
                //     attrs: {
                //         type: 'selection'
                //     }
                // },
                {
                    slot: 'index',
                    attrs: {
                        type: 'index',
                        label: '序号',
                        width: '70',
                    }
                },
                {
                    attrs: {
                        prop: 'maintType',
                        label: '养护类型',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'maintCategory',
                        label: '养护类别',
                        width: '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'maintMeasure',
                        label: '养护措施',
                        'min-width': '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'unitPrice',
                        label: '单价（元）',
                        width: '110',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'constructionInstallationCost',
                        label: '公里建安费（万元）',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'kilometreCost',
                        label: '公里造价（万元）',
                        width: '150',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '130',
                        fixed: 'right'
                    }
                }
            ]),
            selectionList: []
        }
    },
    computed: {
        computedAadt() {
            return (AADTOptions.find(item => item.value === this.titleInfo.aadt) || {}).label
        }
    },
    async created() {
        await this.getSchemeList()
        this.initPriceList()
    },
    methods: {
        initPriceList() {
            this.maintType = ''
            this.titleInfo = this.schemeList[0] || {}
            this.schemeId = this.titleInfo.id
            this.getList()
        },
        handleChangeScheme(item) {
            this.schemeId = item.id
            this.titleInfo = item
            this.maintType = ''
            this.getList()
        },
        // 养护单价列表
        getList() {
            this.listLoading = true
            this.priceModel
                .getList({maintSchemeId: this.schemeId, maintType: this.maintType}, this.page)
                .then(res => {
                    this.list = res.list || []
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        schemeUpdateSuccess(data) {
            this.getSchemeList()
            if (this.schemeId === data.id) {
                this.titleInfo = data
            }
        },
        // 养护类型列表
        getSchemeList() {
            this.schemeLoading = true
            return this.schemeModel
                .getList({schemeName: this.schemeName}, {pageSize: 10000})
                .then(res => {
                    this.schemeList = res.list || []
                })
                .finally(() => {
                    this.schemeLoading = false
                })
        },
        // 查询
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        handleSelectionChange(value) {
            this.selectionList = value
        },
        handleAddScheme() {
            this.$refs['schemeDialog'].open({ type: 'add', schemeList: this.schemeList })
        },
        handleEditScheme(item) {
            this.$refs['schemeDialog'].open({ item, type: 'edit', schemeList: this.schemeList })
        },
        handleDeleteScheme(id) {
            reconfirm({
                text: '是否删除当前数据',
                callback: () => {
                    return this.schemeModel.delete({ id }).then(async() => {
                        this.$message.success('删除成功!')
                        await this.getSchemeList()
                        // 如果删除的是当前选中数据，重置选中为第一条
                        if (id === this.schemeId) {
                            this.initPriceList()
                        }
                    })
                }
            })
        },
        handleAdd() {
            this.$refs['priceDialog'].open({ type: 'add', schemeId: this.schemeId, pavementType: this.titleInfo.pavementType })
        },
        handleEdit(item) {
            this.$refs['priceDialog'].open({ item, type: 'edit', schemeId: this.schemeId, pavementType: this.titleInfo.pavementType })
        },
        handleDelete(id) {
            reconfirm({
                text: '是否删除当前数据',
                callback: () => {
                    return this.priceModel.delete({ id }).then(() => {
                        this.getList()
                        this.$message.success('删除成功!')
                    })
                }
            })
        },
    },

}
</script>

<style lang="scss" scoped>
.scheme-price {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    .no-data {
        color: #9090A0;
        font-size: 14px;
        text-align: center;
        padding: 64px 0;
    }
    .left {
        width: 350px;
        height: 100%;
        margin-right: 16px;
        flex-shrink: 0;
        border: 1px solid #f0f4f7;
        box-shadow: 0px 0px 4px 0px rgba(131, 145, 178, 0.14);
        padding: 24px 16px;
        .search {
            display: flex;
            align-items: center;
            margin: 16px 0;
            .label {
                flex-shrink: 0;
                margin-right: 16px;
                font-size: 14px;
            }
        }
        .list {
            border-bottom: 1px solid #f0f4f7;
            overflow-y: auto;
            overflow-x: hidden;
            max-height: calc(100% - 114px);
            margin-bottom: 16px;
            .item {
                border-top: 1px solid #f0f4f7;
                padding: 8px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                cursor: pointer;
                &:hover,
                &.active {
                    background-color: rgba(0, 98, 255, 0.06);
                }
                .btn {
                    flex-shrink: 0;
                }
            }
        }
    }
    .title-item {
        margin-left: 32px;
    }
}
</style>
